/*
 * @Description: 
 * @Author: 韩双双
 * @Date: 2021-04-22 20:30:36
 * @LastEditTime: 2021-04-29 11:29:31
 * @LastEditors: 韩双双
 */
import useStore from '@/context/useStore';
import React, { useEffect } from 'react';
import { observer } from 'mobx-react-lite';

import styles from './loding.less';
import { timeAgo } from '@/utils/Time';
import { useHistory } from 'umi'
import {
    FileTextOutlined
} from '@ant-design/icons'; 


function loding() {
    let { article } = useStore()
    let history = useHistory()
    
    useEffect(() => {
        article.getAllrecommend()
    }, [])

    let lodding = (ID:string)=>{
        // article.getarticleDetail(ID)
        history.push(`/index/Details/${ID}`)
    }
    
    return (
        <div className={styles.articles}>
            <h3> <FileTextOutlined />推荐文章</h3>
            <div>
                {
                    article.articleloding.map(item => {
                        return <p key={item.id} 
                             onClick={()=>lodding(item.id)}>
                            {item.title +' · '+ `${timeAgo(+ new Date(item.createAt))}`}  
                        </p>
                    })
                }
            </div>
            {/* <div>
                123
            </div> */}
        </div>
    )
}
export default observer(loding)
